<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="VectorX">
    <meta name="keywords" content="京东轮播图">
    <title>【练习】京东轮播图</title>
    <link rel="stylesheet" href="/css/reset.css">
    <style>
        /* 整体居中 */
        .box {
            width: 590px;
            height: 470px;
            /* 水平垂直双方向居中 */
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* ======轮播图Start====== */

        .img_list li {
            /* 每个轮播图绝对定位，让其重叠 */
            position: absolute;
        }

        .img_list li:nth-child(4) {
            /* 目前还没有学习js，暂时做成静态切换层级 */
            z-index: 1;
        }

        /* 全局图像大小 */
        .img_list img {
            /* 我这里之所以要设置宽高，是因为下载的图片大小不全是一样大的 */
            /* 但是一般情况下，这些图片都会裁剪成统一大小，所以可以不用设置 */
            width: 590px;
            height: 470px;
        }

        /* ======轮播图End====== */

        /* ======轮播圆Start====== */

        .circle_list {
            height: 20px;
            /* 开启绝对定位 */
            position: absolute;
            bottom: 20px;
            left: 30px;
            z-index: 2;
            /* 参考京东原网页，整体字体设置样式，这种设置方式还不太懂 */
            /* 其实也可以不设置，不过每个轮播圆之间的间距跟原来就不太一样了 */
            font-size: 0;
            text-align: center;
        }

        /* 轮播圆细节 */
        .circle_list .circle {
            /* 这里设置display: inline-block; 也是一样的 */
            float: left;
            height: 8px;
            width: 8px;
            background-color: rgba(255, 255, 255, .4);
            margin-right: 4px;
            /* 画圆，这个按照课程中的画法，按照网页源代码调出来的有点问题 */
            background-clip: content-box;
            border: 3px transparent solid;
            border-radius: 50%;
        }

        /* 轮播圆悬浮效果 */
        .circle_list .circle:hover,
        .circle_list .circle:nth-child(1) {
            background-color: #fff;
            border: 3px rgba(0, 0, 0, .1) solid;
        }

        /* ======轮播圆End====== */
    </style>
</head>

<body>
    <div class="box">
        <ul class="img_list">
            <li><a href="#"><img src="/assets/京东轮播图/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/6.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/7.jpg" alt=""></a></li>
            <li><a href="#"><img src="/assets/京东轮播图/8.jpg" alt=""></a></li>
        </ul>
        <!-- 我这里结构并没有完全按照课程中的结构来，但实现效果是一样的 -->
        <ul class="circle_list">
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>

    </div>
</body>

</html>